<template>
  <div>
    <div id="steps" style="margin-left: 20px">
      <el-steps
        :active="domain.state"
        v-for="domain in leavingList"
        :key="domain.id"
      >
        <div style="width:20px">
          {{ domain.name }}
        </div>
        <el-step title="学生申请" description="已发送到班主任审核" style="margin-top:30px"></el-step>
        <el-step title="班主任审核" description="正在等待班主任审核" style="margin-top:30px"></el-step>
        <el-step title="辅导员批准" description="正在等待辅导员审核" style="margin-top:30px"></el-step>
      </el-steps>
    </div>

    <div id="pagination">
      <el-row>
        <el-col :span="1" :offset="15">
          <el-pagination
            background
            :page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :current-page="pageNow"
            @size-change="handlePageSizeChange"
            @current-change="handlePageCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import leave from "@/api/leave/leave";
export default {
  name: "leaving",
  data() {
    return {
      //分页相关参数
      pageNow: 1,
      pageSize: 20,
      total: 0,

      leavingList: [],
    };
  },
  created() {
    this.getLeavingList();
  },
  methods: {
    /*获取请假信息*/
    getLeavingList() {
      var leavePageParams = {
        pageNow: this.pageNow,
        pageSize: this.pageSize,
        status:1
      };
      leave
        .getLeaveList(leavePageParams)
        .then((res) => {
          this.total = res.total;
          this.leavingList = res.data;
        })
        .catch((erro) => {
          console.log(erro);
        });
    },
    /*改变页面大小*/
    handlePageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getLeaveList();
    },
    /*改变当前页*/
    handlePageCurrentChange(pageNow) {
      this.pageNow = pageNow;
      this.getLeaveList();
    },
  },
};
</script>

<style scoped>
</style>
